<template>
  <div>
    vuex{{ $store.state.count }}
    <el-button @click="addHandler">+</el-button>
    <el-button @click="subHandler">-</el-button>

    <hr />
    {{ doubleCount }}

    <hr />

    msg练习{{ msg }}
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";

export default {
  name: "AppVuexExample",
  data() {
    return {
      count: "",
    };
  },
  // 数组的写法,例如下面:取出state的count (字符串都是状态的名称)
  // computed: {
  // ...mapState(["count", "msg"]),
  // },

  // 对象写法,例如下面:对象的别名,值是一个函数,函数返回最终的状态值,
  // 这种写法更加灵活,可以通过别名来取用state中的数据,就不怕state中的状态和组件的状态重名,而且可以做一下运算
  computed: {
    ...mapState({
      count: (state) => state.count,
      msg: (state) => state.msg,
    }),
    // doubleCount(){
    //   return this.$store.getters.doubleCount
    // }
    ...mapGetters(["doubleCount"]),
  },
  methods: {
    addHandler() {
      this.$store.commit("add");
    },
    subHandler() {
      this.$store.commit("sub");
    },
  },
  mounted() {
    this.count = this.$store.state.count;
    console.log(this.$store.state.count);
  },
};
</script>

<style lang="scss" scoped></style>
